<template>

  <!-- 9.机构订单记录表.xls -->
  <el-drawer :title="text" :visible.sync="open_8" direction="rtl" size="25%" :show-close="false"
    :wrapperClosable="false">
    <el-row :gutter="20">
      <el-col :span="12">
        <div class="ml30">
          <div class="grid-content bg-purple-dark    text-size-23-w700  ">机构订单记录表.xls</div>
          <div class="grid-content bg-purple     text-size-16 mt20 text-gray  ">请设置报表下载范围</div>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="classflex-end mt20 mr20">
          <el-button @click="cancel" style="width: 100px; " class="">关闭</el-button>
        </div>
      </el-col>
    </el-row>
    <el-form class=" ml30 mr30" ref="queryParams" :model="queryParams" :rules="rules" label-width="80px" label-position="left">
      <el-divider style="width: 80%;"></el-divider>

      <el-form-item label="订单状态" prop="courseSubject">
        <el-select style="width: 360px;" v-model="queryParams.state" placeholder="请选择订单状态">
          <el-option v-for="dict in dict.type.order_state" :key="dict.value" :label="dict.label" :value="dict.value">
          </el-option>
        </el-select>
      </el-form-item>
      <!-- 换成选择月份的 -->
      <el-form-item label="时间段">
        <el-date-picker v-model="dateRange" style="width: 360px;" value-format="yyyy-MM-dd" type="daterange"
          range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
      </el-form-item>


      <el-divider></el-divider>
      <div>
        <el-button type="primary" @click="handleScheduingExport" style="width: 100%;">立即下载</el-button>
        <!-- <el-button @click="cancel">取 消</el-button> -->
      </div>
    </el-form>
  </el-drawer>


</template>

<script>

  export default {
    name: "DownOrderRecordDrawer",
    dicts: ['course_teaching_mode', 'course_state', 'course_subject', 'student_state', "order_state"],
    data() {
      return {
        schoolclassList: [],
        dateRange: [],
        text: "",
        open_8: false,
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 课程管理表格数据



        // 弹出层标题
        title: "",
        // 表单参数
        queryParams: {},
        // 表单校验
        rules: {


        },
        student_state: "",

      };
    },
    created() {

      // this.getCourseList();


    },

    methods: {
      cancel(){
         this.open_8=false;
      },
      opendownorderrecord(){
        this.open_8=true;

      },

      //导出订单
      handleScheduingExport() {
        if(this.queryParams.state=="全部状态"){
           this.queryParams.state=""
        }
          this.queryParams.deptId = this.$store.state.user.deptId;
       // this.download('order/order/export', {
       //   ...this.queryParams
       // }, `order_${new Date().getTime()}.xlsx`)
       this.download('order/order/export', {
         ...this.addDateRange(this.queryParams, this.dateRange)
       }, `order_${new Date().getTime()}.xlsx`)

      },


    },
  }
</script>
<style scoped lang="scss">
  .home {
    blockquote {
      padding: 10px 20px;
      margin: 0 0 20px;
      font-size: 17.5px;
      border-left: 5px solid #eee;
    }

    hr {
      margin-top: 20px;
      margin-bottom: 20px;
      border: 0;
      border-top: 1px solid #eee;
    }

    .col-item {
      margin-bottom: 20px;
    }

    ul {
      padding: 0;
      margin: 0;
    }

    font-family: "open sans",
    "Helvetica Neue",
    Helvetica,
    Arial,
    sans-serif;
    font-size: 13px;
    color: #676a6c;
    overflow-x: hidden;

    ul {
      list-style-type: none;
    }

    h4 {
      margin-top: 0px;
    }

    h2 {
      margin-top: 10px;
      font-size: 26px;
      font-weight: 100;
    }

    p {
      margin-top: 10px;

      b {
        font-weight: 700;
      }
    }

    .update-log {
      ol {
        display: block;
        list-style-type: decimal;
        margin-block-start: 1em;
        margin-block-end: 1em;
        margin-inline-start: 0;
        margin-inline-end: 0;
        padding-inline-start: 40px;
      }
    }
  }
</style>
